/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, RCell, Table, TableBody, TableRow, Text,} from "customize-easy-ui-component";
import {businessCatspMap} from "../../../agreement/AgreementList";
import {eqpTypeAllMap} from "../../../dict/eqpComm";
import {RepLink} from "../../common/base";
import {DirectLink} from "../../../routing/Link";

/** 管道的 封面概要；
 * */
export const 首页设备概况Utili= ({theme, orc, rep } :{theme: any, orc:any, rep:any}
) => {
  const oBstype=businessCatspMap.get(rep?.isp?.bsType!);
  const gdBstype= '年度'===oBstype? '年度检查' : oBstype;
  return <Table fixed={ ["20%","%"] }  css={ {borderCollapse: 'collapse'} }>
    <TableBody rheight={40}>
      <TableRow>
        <RCell css={{border:'none'}}>使用单位：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.使用单位 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>设备类别：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{eqpTypeAllMap.get(orc?.设备类别) || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>设备品种：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{eqpTypeAllMap.get(orc.设备品种) || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>使用登记证号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.使用证号 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>压力管道代码：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.设备代码 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>检验类别：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{gdBstype || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>检验日期：</RCell>
        {orc.检验日期1? <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期1} 至 {orc.检验日期}</CCell>
            :
            <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期}</CCell>
        }
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>监察识别码：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.监察识别码 || '／'}</CCell>
      </TableRow>
    </TableBody>
  </Table>;
};


/**原始记录的 目录打印；
 * @property suffix:  自动加“报告”
 * */
export const 记录目录= ({theme, orc, rep, suffix} :{theme: any, orc:any, rep:any, suffix?:boolean}
) => {
  let muluSn=1;       //目录显示项目序号
  return <>
    <div css={{
      "@media print": {
        pageBreakBefore: 'always',
      },
    }}>
      <RepLink rep={rep} tag={'Entrance'}>
        <Text variant="h2" css={{
          textAlign: 'center',
          "@media print": {
            // pageBreakBefore: 'always',
          },
        }}>目录</Text>
      </RepLink>
    </div>
    {/*【特别注意】底下的calc(100vh - 3rem)若超出一张纸高度,可导致尾随空白页*/}
    <div css={{
      "@media print": {
        //【特殊】布局流如何定位到中间某一张纸张的末尾打印；纸张高度上 剪掉 上面的一行 “目录” 并没有被本div所都囊括的元素高度：推定剪掉高度是2rem。A4纸张竖版大约可接受高度大小=775pt再换算=273.4mm；A4纸297mm-2*(11.7=边距+页眉页脚)；
        //【有问题】目标div必须小于一张纸高度？这里若稍微超出了当前定位纸张区域，@@就可能被切分两页的！！，变成后续尾随空白页面的。所以尽量考虑有余量“- 10pt”:A4纸张竖版。
        height: `calc(100vh - 3rem)`,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',   //'flex-end', 吸附本页纸张的底部区域打印，还是在本张纸张中间打印的？
      },
    }}>
      <div css={{
        display: 'flex',
        justifyContent: 'flex-end',
      }}>
        <Text css={{
          [theme.mediaQueries.md]: {
            marginRight: '2rem',
          }
        }}>报告编号：{rep.isp.no}
        </Text>
      </div>
      <Table fixed={["7%", "%", "11%", "18%"]} css={{borderCollapse: 'collapse', height: `80pt`,}}  tight  miniw={800}>
        <TableBody>
          <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
            <TableRow>
              <CCell component="th" scope="row">序号</CCell>
              <CCell>项目</CCell>
              <CCell>页号</CCell><CCell>附页、附图</CCell>
            </TableRow>
          </DirectLink>
          {orc?.Projects?.map((prj: any, i: number) => {
            if(prj?.na)   return null;       //na:表示不在目录中显示的分项目分页。
            if(prj?.zs || prj?.dd) return null;       //特性表跟着zs证书走到前面去的，不用显示在目录；dd表示用户自定义项目不显示在目录中
            return prj?.do && (
                <DirectLink key={i} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList?from=${i}#ProjectList`}>
                  <TableRow>
                    <CCell component="th" scope="row">{muluSn++}</CCell>
                    <Cell>{prj?.ml ? prj?.ml : suffix? (prj?.name + '报告') : prj?.name}</Cell>
                    <CCell>{prj?.op}</CCell>
                    <CCell>{prj?.oa??'／'}</CCell>
                  </TableRow>
                </DirectLink>
            );
          })
          }
          { !(orc?.Projects?.length>0) &&
              <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
                <TableRow>
                  <CCell colSpan={4}>还未初始化！<br/>空目录表</CCell>
                </TableRow>
              </DirectLink>
          }
        </TableBody>
      </Table>
    </div>
  </>;
};
